<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>电影院管理</a-breadcrumb-item>
    <a-breadcrumb-item>电影管理</a-breadcrumb-item>
  </a-breadcrumb>
  <div>
    <h1>当前您管理的电影院名称为：{{ cnm_name }}</h1>
  </div>
  <a-button type="primary" @click="openAdd">新增</a-button>
  <a-row>
    <a-col :span="4">
      <a-form-item label="电影名称">
        <a-select v-model:value="query.mov_name" placeholder="查询电影名称">
          <a-select-option
            v-for="movie in movies"
            :key="movie.mov_name"
            :value="movie.mov_name"
            >{{ movie.mov_name }}</a-select-option
          >
        </a-select>
      </a-form-item></a-col
    >
    <a-col :span="4"
      ><a-form-item label="影厅编号" :wrapper-col="{ offset: 0 }">
        <a-select
          v-model:value="query.cnm_hall_id"
          placeholder="请选择查询的影厅"
        >
          <a-select-option
            v-for="cinemaHallId in cinemaHallIds"
            :key="cinemaHallId"
            :value="cinemaHallId"
            >{{ cinemaHallId }}号厅</a-select-option
          >
        </a-select>
      </a-form-item></a-col
    >
    <a-col :span="8">
      <a-form-item label="上映时间" >
        <a-space direction="ltr">
          <a-date-picker
            valueFormat="YYYY-MM-DD HH:mm:ss"
            v-model:value="query.screen_time_start"
            :disabled-date="disabledStartDate"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="起始日期"
          />
          <a-date-picker
            valueFormat="YYYY-MM-DD HH:mm:ss"
            v-model:value="query.screen_time_end"
            :disabled-date="disabledEndDate"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="最后日期"
          />
        </a-space> </a-form-item
    ></a-col>
    <a-col :span="5">
      <a-form-item label="票价介于">
        <a-input-number
          v-model:value="query.upper_price"
          :min="0"
          :step="1"
        />到
        <a-input-number
          v-model:value="query.lower_price"
          :min="0"
          :step="1"
        /> </a-form-item
    ></a-col>

      <span><a-button  type="primary" @click="clearQuery()">清空</a-button></span>
      <span style="width:3px"><br></span>
      <span><a-button type="primary" @click="getPage(1)">查询</a-button></span>
    </a-row
  >

  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <template #cusid="{ text }"> {{ text }} 号厅 </template>
    <template #opr="{ record }">
      <a-button type="link" @click="openUpd(record)">修改</a-button>
      <a-divider type="vertical" />
      <a-button
        type="link"
        style="color: #ff0000"
        @click="openDel(record.screen_id)"
        >删除</a-button
      >
    </template>
  </a-table>
  <!-- 新增弹框 -->
  <a-modal v-model:visible="visible" title="新增排片" @ok="execAdd">
    <a-form
      :model="addObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 15 }"
    >
      <a-form-item label="电影院名">
        <a-select v-model:value="cnm_name" placeholder="cnm_name" disabled>
        </a-select>
      </a-form-item>
      <a-form-item label="电影名称">
        <a-select v-model:value="addObj.mov_name" placeholder="请选择电影">
          <a-select-option
            v-for="movie in movies"
            :key="movie.mov_name"
            :value="movie.mov_name"
            >{{ movie.mov_name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="影厅编号">
        <a-select v-model:value="addObj.cnm_hall_id" placeholder="请选择影厅">
          <a-select-option
            v-for="cinemaHallId in cinemaHallIds"
            :key="cinemaHallId"
            :value="cinemaHallId"
            >{{ cinemaHallId }}号厅</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="上映时间">
        <a-date-picker
          v-model:value="addObj.screen_time"
          show-time
          type="date"
          placeholder="选择电影上映时间"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="电影票价">
        <a-input-number v-model:value="addObj.price" :min="0" :step="0.1" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="submit" type="primary" @click="execAdd()">提交 </a-button>
    </template>
  </a-modal>

  <!-- 修改弹框 -->
  <a-modal v-model:visible="visible2" title="修改排片" @ok="execUpd">
    <a-form
      :model="updObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 15 }"
    >
      <a-form-item label="电影院名">
        <a-select v-model:value="cnm_name" placeholder="cnm_name" disabled>
        </a-select>
      </a-form-item>
      <a-form-item label="电影名称">
        <a-select v-model:value="updObj.mov_name" placeholder="请选择电影">
          <a-select-option
            v-for="movie in movies"
            :key="movie.mov_name"
            :value="movie.mov_name"
            >{{ movie.mov_name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="影厅编号">
        <a-select v-model:value="updObj.cnm_hall_id" placeholder="请选择影厅">
          <a-select-option
            v-for="cinemaHallId in cinemaHallIds"
            :key="cinemaHallId"
            :value="cinemaHallId"
            >{{ cinemaHallId }}号厅</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="上映时间">
        <a-date-picker
          valueFormat="YYYY-MM-DD HH:mm:ss"
          v-model:value="updObj.screen_time"
          show-time
          type="date"
          placeholder="选择电影上映时间"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="电影票价">
        <a-input-number v-model:value="updObj.price" :min="0" :step="0.1" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="submit" type="primary" @click="execUpd()">提交 </a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref, reactive } from "vue";
import { get, post, put, del, tip } from "@/common";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal } from "ant-design-vue";
const columns = [
  {
    dataIndex: "mov_name",
    title: "电影名称",
  },
  {
    dataIndex: "cnm_hall_id",
    title: "影厅编号",
    //slots定义插槽，即将开发者自定义的内容嵌入
    slots: {
      customRender: "cusid", //定义插槽名称
    },
  },
  {
    dataIndex: "screen_time", //服务端数据
    title: "电影时间", //表头数据
  },
  {
    dataIndex: "price",
    title: "电影价格",
  },
  {
    key: "opr",
    title: "操作",
    slots: {
      customRender: "opr", //定义插槽名称
    },
  },
];

//分页处理-start
const query = reactive({}); //定义查询参数

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 7, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "7", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});
//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;
  get("/c_admin/movie/currentManager").then((res) => {
    query.m_id = res.data.m_id;
    get("/c_admin/movie", query).then((res) => {
      page.value = res.data; //将服务端传来的分页数据赋值予page
      //更新分页引擎
      cnm_name.value = page.value.list[0].cnm_name;
      getScreen(cnm_name.value);
      pagination.current = page.value.current;
      pagination.pageSize = page.value.pageSize;
      pagination.total = page.value.total;
    });
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

//分页处理-end
//查询
const clearQuery = () => {
  (query.mov_name = undefined),
    (query.cnm_hall_id = undefined),
    (query.screen_time_start = ""),
    (query.screen_time_end = ""),
    (query.upper_price = ""),
    (query.lower_price = "");
};
// 增加
const cinemaHallIds = ref({});
const cnm_name = ref();
const movies = ref({});
const getScreen = (name) => {
  get("/info/movie/movie-list", { cnm_name: name }).then((res) => {
    movies.value = res.data;
  });
  get("/c_admin/movie/getCinemaHallIdByName", { cnm_name: name }).then(
    (res) => {
      cinemaHallIds.value = res.data;
    }
  );
  addObj.cnm_name = name;
};
const visible = ref(false);
const openAdd = () => {
  visible.value = true;
};
const addObj = reactive({
  cnm_name: undefined,
  mov_name: undefined,
  cnm_hall_id: undefined,
  screen_time: "",
  price: undefined,
});

const execAdd = () => {
  console.log(addObj);
  post("/c_admin/movie", addObj).then((res) => {
    tip.success("提交成功");
    emptyAdd();
    getPage(1);
  });
};
const emptyAdd = () => {
  visible.value = false;
  addObj.cnm_name = undefined;
  addObj.mov_name = undefined;
  addObj.cnm_hall_id = undefined;
  addObj.screen_time = "";
  addObj.price = undefined;
};
// 修改
const visible2 = ref(false);
const openUpd = (cus) => {
  updObj.screen_id = cus.screen_id;
  updObj.mov_name = cus.mov_name;
  updObj.cnm_hall_id = cus.cnm_hall_id;
  updObj.screen_time = cus.screen_time;
  updObj.price = cus.price;
  visible2.value = true;
  getScreen(cnm_name.value);
};
const updObj = reactive({
  screen_id: undefined,
  mov_name: undefined,
  cnm_hall_id: undefined,
  screen_time: "",
  price: undefined,
});

const execUpd = () => {
  post("/c_admin/movie/updScreen", updObj).then((res) => {
    tip.success("修改成功");
    emptyUpd();
    getPage(1);
  });
};
const emptyUpd = () => {
  visible2.value = false;
  openUpd.screen_id = undefined;
  openUpd.mov_name = undefined;
  openUpd.cnm_hall_id = undefined;
  openUpd.screen_time = "";
  openUpd.price = undefined;
};
//删除

const openDel = (id) => {
  Modal.confirm({
    title: "你确定要删除这条记录吗？",
    icon: createVNode(ExclamationCircleOutlined),
    content: "删除的记录将不可恢复！",

    onOk() {
      del("/c_admin/movie/" + id).then((res) => {
        tip.success("删除成功!");
        getPage(1);
      });
    },
    onCancel() {},
  });
};
</script>

<style scope>
</style>